<template>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item>1</van-swipe-item>
    <van-swipe-item @click="fn1">2</van-swipe-item>
    <van-swipe-item>3</van-swipe-item>
    <van-swipe-item>4</van-swipe-item>
  </van-swipe>
</template>

<script>
//import Swiper JS
// import Swiper from "swiper";
//import "swiper/css/swiper.min.css";
// import axios from "axios";

export default {
  name: "Banner",
  data() {
    return {
      imgs: [
        {
          url: "https://chengqige-7gunki87efeca981-1302748923.tcloudbaseapp.com/1024/6.jpg",
        },
        {
          url: "https://chengqige-7gunki87efeca981-1302748923.tcloudbaseapp.com/1024/12.jpg",
        },
        {
          url: "https://chengqige-7gunki87efeca981-1302748923.tcloudbaseapp.com/1024/7.jpg",
        },
        {
          url: "https://chengqige-7gunki87efeca981-1302748923.tcloudbaseapp.com/1024/2.jpg",
        },
      ],
      msg: "hi",
    };
  },
   created(){
    axios({
      url:"http://121.89.205.189:3001/banner/list"
    })
    .then(res=>{
      console.log("后端响应回来了,res.code:",res.code);
      if(res.data.code==200){
        this.imgs = res.data.data;
        console.log("this.imgs",this.imgs);
        this.$nextTick(()=>{
        this.createSwiper();
      })
      } 

    })
   },
   methods:{
    fn1(){
      location.href="https:www.badu.com";
    },
    createSwiper(){
      const swiper = new Swiper(".swiper-container",{
      // 让轮播图可以循环播放
      loop:true,

      // 如果需要分页器
      pagination:{
        el:'.swiper-pagination'
      },
      // 如果需要前进后退按钮
      navigation:{
        nextEl:".swiper-button-next",
        prevEl:'.swiper-button-prev',
      },
      });
    }
   }
};
</script>

<style scoped>
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
